<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 
      子组件向父组件传值
      1.子组件通过$emit触发一个自定义事件，在$emit的第二个参数中进行传值
      2.父组件 监听子组件触发的自定义事件
      3.父组件在 自定义事件的处理函数中 获取子组件传过来的数据
     -->
    <!-- 2.父组件 监听子组件触发的自定义事件 -->
    <Son :title="myTitle" :count="count" @changeValue="fn"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来黑马程序员',
      count: 100,
    }
  },
  components: {
    Son,
  },
  methods: {
    // 3.父组件在 自定义事件的处理函数中 获取子组件传过来的数据
    fn(val) {
      // console.log(val);
      this.myTitle = val
    },
  },
}
</script>

<style>
</style>